<template>
  <div>
    <el-tooltip
      :content="noticeContent"
      effect="dark"
      placement="bottom"
      :class="{ 'badge-custom': noticeCount > 0 }"
      class="right-menu-item hover-effect"
      ><el-badge :value="noticeCount">
        <svg-icon icon-class="notice" @click="toNoticePage" />
      </el-badge>
    </el-tooltip>
  </div>
</template>

<script>
import { listNotice } from "@/api/system/notice";

export default {
  name: "RuoYiGit",
  data() {
    return {
      noticeCount: 0,
      noticeContent: "无未读消息",
      intervalId: null, // 用来存储 setInterval 的 ID，以便清除定时器
    };
  },
  mounted() {
    this.startPolling();
  },
  beforeDestroy() {
    this.stopPolling();
  },
  methods: {
    toNoticePage() {
      //前往通知公告管理页面
      this.$router.push("/system/notice");
    },
    poll() {
      // 执行轮询任务
      listNotice().then((response) => {
        if (response.code === 200) {
          this.noticeCount = response.total;
          this.noticeContent = "您有" + this.noticeCount + "条未读消息";
        }
      });
    },
    // 启动轮询
    startPolling() {
      // 每5秒调用一次 fetchData 方法
      this.intervalId = setInterval(this.poll, 6000 * 10 * 60);
    },

    // 停止轮询
    stopPolling() {
      // 清除定时器 停止轮询 防止内存泄漏
      clearInterval(this.intervalId);
      this.intervalId = null;
    },
  },
};
</script>
<style scoped>
::v-deep .el-badge__content {
  margin-top: 12px; /*调整一下上下左右你喜欢的位置*/
}
.badge-custom {
  animation: blink-animation 0.5s infinite alternate; /* 设置闪烁动画 */
}

@keyframes blink-animation {
  0% {
    opacity: 1;
  } /* 定义动画起始状态 */
  100% {
    opacity: 0.1;
  } /* 定义动画结束状态 */
}
</style>
